<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>友和动态</title>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/concat.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/menu.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" href="css/swiper-img.css" />

    <script src="libs/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script
      src="libs/greensock/TweenMax.min.js"
      type="text/javascript"
    ></script>
    <script
      src="libs/greensock/CustomEase.min.js"
      type="text/javascript"
    ></script>
    <script src="libs/swiper-bundle.min.js" type="text/javascript"></script>
    <style>
      .my-map {
        margin: 0 auto;
        max-width: 670px;
        height: 436px;
      }
      .my-map .icon {
        background: url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png)
          no-repeat;
      }
      .my-map .icon-cir {
        height: 31px;
        width: 28px;
      }
      .my-map .icon-cir-red {
        background-position: -11px -5px;
      }
      .amap-container {
        height: 100%;
      }
      .myinfowindow {
        width: 240px;
        min-height: 50px;
      }
      .myinfowindow h5 {
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        font-size: 14px;
        font-weight: bold;
        width: 220px;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
      }
      .myinfowindow div {
        margin-top: 10px;
        min-height: 40px;
        line-height: 20px;
        font-size: 13px;
        color: #6f6f6f;
      }
    </style>
  </head>
  <body>
    <div class="main_cover"></div>
    <nav id="site_header" class="contact_header"></nav>
    <nav id="top_menu" class="contact_top_menu"></nav>

    <section class="o_page concat_page">
      <div class="head_pic"></div>
      <div class="o_hero_area">
        <div class="m_navName">
          <div class="m_navName_inner">
            <span>联</span>
            <span>系</span>
            <span>我</span>
            <span>们</span>
          </div>
        </div>
      </div>

      <div class="o_container">
        <div class="o_container_inner">
          <div class="o_container_content">
            <div class="row o_section lianxi_content">
              <div class="left">
                <div class="item">
                  <div class="icon">
                    <img src="./static/concat/2.png" alt="" />
                  </div>
                  <div class="info">
                    <div class="name">地址</div>
                    <div class="value">广州市天河区粤垦路66号</div>
                  </div>
                </div>
                <div class="item">
                  <div class="icon">
                    <img src="./static/concat/3.png" alt="" />
                  </div>
                  <div class="info">
                    <div class="name">电话</div>
                    <div class="value">020- 8519 1888</div>
                  </div>
                </div>
                <div class="item">
                  <div class="icon">
                    <img src="./static/concat/4.png" alt="" />
                  </div>
                  <div class="info">
                    <div class="name">E-mail</div>
                    <div class="value">mail@yuwa.cn</div>
                  </div>
                </div>
                <div class="item">
                  <div class="icon">
                    <img src="./static/concat/5.png" alt="" />
                  </div>
                  <div class="info">
                    <div class="name">传真</div>
                    <div class="value">020-8519 1666</div>
                  </div>
                </div>
              </div>

              <div class="right">
                <div id="wrap" class="my-map">
                  <div id="mapContainer"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <nav id="site_footer"></nav>
  </body>
  <script src="//webapi.amap.com/maps?v=1.3&key=e07ffdf58c8e8672037bef0d6cae7d4a"></script>
  <script>
    !(function () {
      var infoWindow,
        map,
        level = 18,
        center = { lng: 113.333877, lat: 23.152849 },
        features = [
          {
            icon: "cir",
            color: "red",
            name: "地点",
            desc: "广州市天河区粤垦路66号",
            lnglat: {
              Q: 23.152849011132123,
              R: 113.33387699246407,
              lng: 113.333877,
              lat: 23.152849,
            },
            offset: { x: -9, y: -31 },
            type: "Marker",
          },
        ];

      function loadFeatures() {
        for (
          var feature, data, i = 0, len = features.length, j, jl, path;
          i < len;
          i++
        ) {
          data = features[i];
          switch (data.type) {
            case "Marker":
              feature = new AMap.Marker({
                map: map,
                position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                zIndex: 3,
                extData: data,
                offset: new AMap.Pixel(data.offset.x, data.offset.y),
                title: data.name,
                content:
                  '<div class="icon icon-' +
                  data.icon +
                  " icon-" +
                  data.icon +
                  "-" +
                  data.color +
                  '"></div>',
              });
              break;
            case "Polyline":
              for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
                path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
              }
              feature = new AMap.Polyline({
                map: map,
                path: path,
                extData: data,
                zIndex: 2,
                strokeWeight: data.strokeWeight,
                strokeColor: data.strokeColor,
                strokeOpacity: data.strokeOpacity,
              });
              break;
            case "Polygon":
              for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
                path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
              }
              feature = new AMap.Polygon({
                map: map,
                path: path,
                extData: data,
                zIndex: 1,
                strokeWeight: data.strokeWeight,
                strokeColor: data.strokeColor,
                strokeOpacity: data.strokeOpacity,
                fillColor: data.fillColor,
                fillOpacity: data.fillOpacity,
              });
              break;
            default:
              feature = null;
          }
          if (feature) {
            AMap.event.addListener(feature, "click", mapFeatureClick);
          }
        }
      }

      function mapFeatureClick(e) {
        if (!infoWindow) {
          infoWindow = new AMap.InfoWindow({ autoMove: true, isCustom: false });
        }
        var extData = e.target.getExtData();
        infoWindow.setContent(
          "<div class='myinfowindow'><h5>" +
            extData.name +
            "</h5><div>" +
            extData.desc +
            "</div></div>"
        );
        infoWindow.open(map, e.lnglat);
      }

      map = new AMap.Map("mapContainer", {
        center: new AMap.LngLat(center.lng, center.lat),
        level: level,
        dragEnable: true,
      });

      loadFeatures();

      map.on("complete", function () {
        map.plugin(["AMap.ToolBar", "AMap.Scale"], function () {
          map.addControl(
            new AMap.ToolBar({ ruler: false, direction: false, locate: false })
          );
          map.addControl(new AMap.Scale());
        });
      });
    })();
  </script>
  <script src="js/utils.js" type="text/javascript"></script>
  <script src="js/menu.js" type="text/javascript"></script>
</html>
